import React from 'react'
import { Row, Col, Typography, Button, Switch, Input } from 'antd'
import { Dropdown, Space, Divider, Select } from 'antd';
import { DownOutlined } from '@ant-design/icons';
const { Title } = Typography;
const Scale = (props) => {
    const { data = {}, list, onChange, selectIndex, } = props
    const {
        require = false,
        scaleType,
        scaleNum,
        rule ='order',
    } = data
    const scaleTypeOption = [{
        label:'满意度',
        value:"satisfaction"
     },
     {
        label:'认同度',
        value:"identity"
     },
     {
        label:'意愿度',
        value:"willingness"
     },
     {
        label:'符合度',
        value:"conformance"
     },
     {
        label:'可能性',
        value:"possibility"
     },
     {
        label:'自定义',
        value:"custom"
     },
    ]
    const items = [
        {
            label: (
                <Button onClick={() => {
                    onChange({
                        changeType: 'all',
                        list: list.map(item => {
                            return {
                                ...item,
                                require: true
                            }
                        })
                    })
                }} type='link'>全部题目设为必填</Button>
            ),
            key: '0',
        },
        {
            label: (
                <Button onClick={() => {
                    onChange({
                        changeType: 'all',
                        list: list.map(item => {
                            return {
                                ...item,
                                require: false
                            }
                        })
                    })
                }} type='link'>全部题目设为非必填</Button>
            ),
            key: '1',
        },
    ];
    const scaleNumOption = [{
        label:'2',
        value:2
     },
     {
        label:'3',
        value:3
     },
     {
        label:'4',
        value:4
     },
     {
        label:'5',
        value:5
     },
     {
        label:'6',
        value:6
     },
     {
        label:'7',
        value:7
     },
     {
        label:'8',
        value:8
     },
     {
        label:'9',
        value:9
     },
     {
        label:'10',
        value:10
     },
    ]
    const scaleTypeRender={
        satisfaction:{orderValue:"非常满意",reverseValue:"非常不满意"},
        identity:{orderValue:"非常认同",reverseValue:"非常不认同"},
        willingness:{orderValue:"非常意愿",reverseValue:"不意愿"},
        conformance:{orderValue:"非常符合",reverseValue:"不符合"},
        possibility:{orderValue:"非常可能",reverseValue:"不可能"},
        custom:{orderValue:'',reverseValue:""},
    }
    return <Row gutter={[24, 24]}>
        <Col span={24}>
            <Title level={4}>全局设置</Title>
        </Col>
        <Col span={24}>
            <Dropdown
                menu={{
                    items,
                }}
            >
                <Button type='link' onClick={(e) => e.preventDefault()}>
                    <Space>
                        全部题目必填设置
                        <DownOutlined />
                    </Space>
                </Button>
            </Dropdown>
        </Col>
        <Col span={24}>
            <Divider></Divider>
        </Col>
        <Col span={24}>
            <Title level={4}>基础设置</Title>
        </Col>
        <Col span={24}>
            此题必填   <Switch onChange={(e) => {
                onChange({
                    data: { require: e },
                    changeType: 'update',
                    index: selectIndex
                })
            }} checked={require}></Switch>
        </Col>
        <Col span={24}>
            <Divider></Divider>
        </Col>
        <Col span={24}>
            <Title level={4}>量表设置</Title>
        </Col>
        <Col span={24}>
            量表类型
        </Col>
        <Col span={24}>
            <Space >
                <Select onChange={(e) => {
                    onChange({
                        data: {
                             scaleType:e,
                            rule:'order',
                             ...scaleTypeRender[e]
                        },
                        changeType: 'update',
                        index: selectIndex
                    })
                }} value={scaleType} style={{ width: 180 }} options={scaleTypeOption}></Select>
            </Space>
        </Col>
        <Col span={24}>
            量级类型
        </Col>
        <Col span={24}>
            <Space >
                <Select onChange={(e) => {
                    onChange({
                        data: {
                            scaleNum:e
                        },
                        changeType: 'update',
                        index: selectIndex
                    })
                }} value={scaleNum} style={{ width: 180 }} options={scaleNumOption}></Select>
            </Space>
        </Col>
    </Row>
}
export default Scale